<template>
  <div id="access" style="background-image: url('/static/background/background.png'); min-height: 99vh; position: relative;">
    <div id="tableContainer" style="position: absolute; top: 20px; left: 50px; right: 50px;">
      <div id="userInfo_information">接入配置</div>
      <!-- <div class="line"></div> -->
      <el-row>
        <el-col :span="24">
          <div style="margin-left:10px; margin-top:10px;">
            <el-select v-model='form.cloudPlatformValue' placeholder='云商选择'>
              <el-option v-for='item in cloudPlatform' :label='item.label' :key='item.value' :value='item.value'></el-option>
            </el-select>
            <el-select v-model='form.resourceTypeValue' placeholder='资源类型选择' multiple style="margin-left: 2px;">
              <el-option v-for='item in resourceType' :label='item.label' :key='item.value' :value='item.value'></el-option>
            </el-select>
            <el-select v-model='form.authorityTypeValue' placeholder='权限选择' style="margin-left: 2px;">
              <el-option v-for='item in authorityType' :label='item.label' :key='item.value' :value='item.value'></el-option>
            </el-select>
            <el-button style="margin-left: 10px;" type="primary" @click="addButton">添加</el-button>
          </div>
        </el-col>
        <el-col :span="24">
          <div class='table_box'>
            <el-table
              :header-cell-style="{ background: 'transparent', color: '#606266' }"
              :data="tableData" height='66vh' border
              style="width: 99%; margin-left: 10px; margin-top: 15px; margin-right: 10px;">
              <el-table-column prop="cloudPlatformValue" label="云商名称"/>
              <el-table-column prop="resourceTypeValue" label="资源类型">
                <template slot-scope="scope">
                  <el-tag v-for="item in scope.row.resourceTypeValue" :key="item" effect="plain" type="info"> {{ item }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="authorityTypeValue" label="权限类型"/>
            </el-table>
          </div>
        </el-col>
        <el-col :span="24">
          <el-button style="margin-top:10px; float:right;" type="primary">保存</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script src='./js/index.js'/>
<style lang="scss">

/* 最外层透明 */
.el-table, .el-table__expanded-cell {
  background-color: transparent;
}

/* 表格内背景颜色 */
.el-table th, .el-table tr, .el-table td {
  background-color: transparent;
}

.custom-label-color .el-form-item__label {
  color: #FFFFFF; /* 白色 */
}

::v-deep .el-form-item__label {
  color: #FFFFFF; /* 白色 */
}

#access {

  #expireNoteContainer {
    width: 100%;
    font-size: 35px;
    padding-top: 25px;
  }

  .line {
    align: center;
    height: 1px;
    background: #CED2DB;
    overflow: hidden;
    margin: 0 auto;
  }

  #tableContainer {
    // border: 1px solid #B3BFD7;
    margin: 0px auto 20px;
    -moz-box-shadow: 4px 4px 2px #F1F1F3;
  }

  #userInfo_information {
    margin: 0;
    color: #8C95A6;
    text-align: center;
    padding: 18px 0 13px;
    font-size: 24px;
  }

}


.table_box {
  //表格间距
  // margin: 20px 50px 20px 50px;

  .el-table--mini .el-table__cell {
  }

  //整个表格背景颜色及边框弧度
  .el-table {
    background-color: rgba(38, 38, 38, 0);
    border-radius: 3px;
    border-color: white;
  }

  //字体颜色
  .el-table tr {
    background-color: transparent;
    color: white;
  }

  .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  }

  //标题背景颜色
  .el-table th {
    background-color: rgba(150, 150, 150, 0.26) !important;
    font-size: 11pt;
  }

  //标题字体颜色
  .el-table th .cell {
    color: #ffffff;
    font-size: 11pt;
    height: 19px
  }

  //去除行下划线
  .el-table td {
    border-color: rgba(255, 255, 255, 0.2);
    font-size: 11pt;
  }

  //修改鼠标滑过背景颜色
  .el-table--enable-row-hover .el-table__body tr:hover td {
    background-color: rgba(38, 38, 38, 0.5) !important;
    color: white !important;
  }
}
</style>
